<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item :label="$t('type')">
        <el-select
          v-model="loginType"
          @change="pageGetUserLoginLog"
        >
          <el-option
            v-for="item in loginTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('startDate')">
        <el-date-picker
          v-model="startDate"
          type="datetime"
          :placeholder="$t('startDate')"
          align="right"
          :picker-options="pickerOptions1"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item :label="$t('endDate')">
        <el-date-picker
          v-model="endDate"
          type="datetime"
          :placeholder="$t('endDate')"
          align="right"
          :picker-options="pickerOptions1"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="pageGetUserLoginLog"
        >{{ $t('search') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="showMap"
        >{{ $t('map') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      style="width: 100%"
      :data="userLoginLogList"
    >
      <el-table-column prop="auth" :label="$t('user')+$t('name')"/>
      <el-table-column prop="domainName" :label="$t('domainName')"/>
      <el-table-column prop="address" :label="$t('address')"/>
      <el-table-column prop="ip" :label="$t('ip')"/>
      <el-table-column
        prop="updateDate"
        :label="$t('time')"
        sortable
        width="200"

      >
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span style="margin-left: 13px">{{ formatDate(scope.row.updateDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="loginType" :label="$t('type')" width="150" :formatter="formatterLoginType"/>
    </el-table>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :visible.sync="mapVisible"
      destroy-on-close
      width="1200px"
      top="15px"
    >
      <login-map
        style="width: 100%"
        :user-id="userId"
      />
    </el-dialog>

  </div>
</template>

<script>
import { formatDate, formatterLoginType, listLoginType } from '@/util/common'
import { pageGetUserLoginLog } from '@/api/auth/authUserLoginLogApi'
import { getPageSize, getUserId, setPageSize } from '@/util/storage'
import LoginMap from '@/components/LoginMap'

export default {
  name: 'UserLoginLog',
  components: {
    LoginMap
  },
  data() {
    return {
      mapVisible: false,
      loginType: null,
      loginTypeList: [],
      userLoginLogList: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      userId: getUserId(),
      startDate: 0,
      endDate: 0,
      pickerOptions1: {
        shortcuts: [
          {
            text: this.$t('today'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('today'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('a') + this.$t('week') + this.$t('ago'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.loginTypeList = listLoginType(this)
    const timestamp = new Date().getTime()
    this.startDate = timestamp - 7 * 24 * 60 * 60 * 1000
    this.endDate = timestamp + 4 * 60 * 60 * 1000
    this.pageGetUserLoginLog()
  },
  methods: {
    showMap() {
      this.mapVisible = true
    },
    formatterLoginType(item) {
      return formatterLoginType(this,item.loginType)
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetUserLoginLog()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetUserLoginLog()
    },
    pageGetUserLoginLog() {
      pageGetUserLoginLog({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        startDate: Math.round(this.startDate / 1000),
        endDate: Math.round(this.endDate / 1000),
        userId: this.userId,
        loginType: this.loginType
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.userLoginLogList = data.data
        }
      })
    }
  }
}
</script>
<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .danger-row {
  background: #ff5d42;
}
</style>
